<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="route.path" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" style="height: 100%; border: 0;">

                    <el-menu-item v-for="(item, index) in subTab" :index="item.path" :key="item.sort"
                        style="border-bottom: 1px solid #eee" @click="MenuNavigator(item.path)">
                        <span style="font-weight: 700">{{ item.name }}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>

    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
const subTab = ref([{ name: '个人信息', path: '/main/user_option/user_message' }, { name: '个人动态', path: '/main/user_option/user_dynamic' }])
const route = useRoute();
const router = useRouter();
onMounted(() => {

})

function MenuNavigator(path) {
    router.push(path)
}
</script>

<style lang="scss" scoped>
body {
    height: 99vh;
    width: 100%;
}

.el-aside {
    height: 90vh;
}

.el-main {
    border-left: 1px solid #ddd;
    height: 92vh;
    width: 100%;
    background-color: #eeeeee90;
}
</style>